<template>
	<div class="changePassword navBar">
		<van-nav-bar :title="type == 0 ? '修改登录密码' : '修改交易密码'" left-arrow @click-left="$routerBack" />
		
		<div v-if="type == 0">
			<div class="cp_item">
				<div>
					<span>原密码</span>
					<input v-model="post_data.pwd" placeholder="请输入原密码" class="nick_name" type="password">
				</div>
				<img class="go" src="../../assets/user/go.png" alt="">
			</div>
			<div class="cp_item">
				<div>
					<span>新密码</span>
					<input v-model="post_data.pwd2" placeholder="请输入6-18位新密码" class="nick_name" type="password" >
				</div>
				<img class="go" src="../../assets/user/go.png" alt="">
			</div>
			<div class="cp_item">
				<div>
					<span>确认密码</span>
					<input v-model="post_data.pwd3" placeholder="请再次输入新密码" class="nick_name" type="password" >
				</div>
				<img class="go" src="../../assets/user/go.png" alt="">
			</div>
		</div>
		
		<!-- 修噶交易密码 -->
		<div v-if="type == 1">
			<div class="cp_item">
				<div>
					<span>手机号码</span>
					<input readonly="readonly" :value="$route.params.phone" placeholder="请输入原密码" class="nick_name" type="text">
				</div>
				<!-- <img class="go" src="../../assets/user/go.png" alt=""> -->
			</div>
			<div class="cp_item">
				<div>
					<span>验证码</span>
					<input v-model="post_data.verify" placeholder="请输入验证码" class="nick_name" type="text" >
				</div>
				<p class="getcode" @click="getCode">{{code_text}}</p>
			</div>
			<div class="cp_item">
				<div>
					<span>新密码</span>
					<input v-model="post_data.pwd2" placeholder="请再次输入新密码" class="nick_name" type="password" >
				</div>
				<img class="go" src="../../assets/user/go.png" alt="">
			</div>
			<div class="cp_item">
				<div>
					<span>确认密码</span>
					<input v-model="post_data.pwd3" placeholder="请再次输入新密码" class="nick_name" type="password" >
				</div>
				<img class="go" src="../../assets/user/go.png" alt="">
			</div>
		</div>
		
		<button class="cp_con" @click="changeLogin" v-if="type == 0">确认修改</button>
		<button class="cp_con" @click="changeJY" v-if="type == 1">确认修改</button>
	</div>
</template>

<script>
	export default{
		name:"changePassword",
		created(){
			console.log(this.$route)
		},
		data(){
			
			return{
				type:this.$route.params.type,
				
				pwd:"",
				
				post_data:{
					pwd:"",
					pwd2:"",
					pwd3:"",
					verify:""
				},
				
				code_status:true,
				
				code_text: "获取验证码"
			}
			
		},
		methods:{
			// 获取验证码
			async getCode(){
				
				if (!this.code_status) {
					return
				}
				
				this.code_status = false
				
				try{
					
					const data = await this.$apis.User.sendRegVerify( { phone:this.$route.params.phone })
					
					this.$toast(data.msg)
					
					let count = 60
					
					setInterval(() => {
					
						count--
						this.code_text = count + 'S后重发'
					
						if (count <= 0) {
							this.code_text = "获取验证码"
							this.code_status = true
						}
					
					}, 1000)
					
				}catch(e){
					
					this.$toast(e.msg)
					
					this.code_status = true
					//TODO handle the exception
				}
				
			},
			// 修改交易密码
			async changeJY(){
					
				if(this.post_data.verify.trim().length <4 || this.post_data.verify.trim().length > 6) return this.$toast("请输入正确的验证码");
				
				if(this.post_data.pwd2.trim().length <6 || this.post_data.pwd2.trim().length > 18) return this.$toast("新密码格式为6-18位数字字母组成");
				
				if(this.post_data.pwd2 != this.post_data.pwd3 ) return this.$toast("确认密码与新密码不一致");
				
				this.$toast.loading({
				  message: '更新中...',
				  forbidClick: true,
				  duration:0
				});
				
				try{
					
					const data = await this.$apis.User.jiaoyiPassword(this.post_data)
					
					this.$toast(data.msg)
					
					setTimeout( () => {
						this.$router.push("/security")
					},1500)
					
				}catch(e){
					
					this.$toast(e.msg)
					//TODO handle the exception
				}
				
			},
			// 修改登录密码
			async changeLogin(){
				
				try{
					
					if(this.post_data.pwd.trim().length <6 || this.post_data.pwd.trim().length > 18) return this.$toast("请输入正确的原密码");
					
					if(this.post_data.pwd2.trim().length <6 || this.post_data.pwd2.trim().length > 18) return this.$toast("新密码格式为6-18位数字字母组成");
					
					if(this.post_data.pwd2 != this.post_data.pwd3 ) return this.$toast("确认密码与新密码不一致");
					
					this.$toast.loading({
					  message: '更新中...',
					  forbidClick: true,
					  duration:0
					});
					
					const data = await this.$apis.User.updatePassword(this.post_data)
					
					this.$toast(data.msg)
					
					setTimeout( () => {
						this.$router.push("/security")
					},1500)
					
				}catch(e){
					
					this.$toast(e.msg)
					//TODO handle the exception
				}
				
			}
		}
	}
</script>

<style lang="less" scoped>
	@import '../../style/navBar.less';
	
	.changePassword{
		
		.cp_con {
			display: block;
			width: 5.58rem;
			height: .78rem;
			box-shadow: inset 0px 0px .3rem 0px rgba(28, 176, 212, 1);
			opacity: 0.9;
			border-radius: .2rem;
			font-size: .28rem;
			color: #94E9FF;
			border: none;
			outline: none;
			background-color: transparent;
			margin: auto;
			margin-top: 0.88rem;
		}
		
		.cp_item{
			padding: .3rem .4rem;
			box-sizing: border-box;
			color: #94E9FF;
			font-size: .28rem;
			display: flex;
			align-items: center;
			justify-content: space-between;
			border-bottom: 1px solid #1A304F;
			
			.getcode{
				width:1.5rem;
				height:.6rem;
				background:linear-gradient(0deg,rgba(28,206,244,1),rgba(0,254,202,1));
				border-radius:.1rem;
				font-size: .24rem;
				text-align: center !important;
				line-height: .6rem;
				color: #333;
			}
			
			span{
				display: block;
				align-items: center;
				width: 1.2rem;
			}
			
			div{
				display: flex;
				align-items: center;
			}
			
			input{
				margin-left: .5rem;
				border: none;
				outline: none;
			}
			
			input::placeholder{
				color: #3A627E;
			}
		}
	}
</style>
